<!--胶囊图组件-->
<template>
  <section v-if="list && list.length>0" class="capsule-chart" :style="{ 'margin-top': top }">
    <section
      class="capsule-chart-inner"
      :style="{
        height: height,
      }"
    >
      <template v-if="list && list.length > 0">
        <van-swipe
          ref="swiper"
          :height="height"
          class="img-entry"
          :autoplay="option.autoplay*1000"
          :duration="option.duration*1000"
          :loop="option.loop"
          :show-indicators="option.indicators"
          :indicator-color="!option.indicatorsColorType ? option.indicatorsColor :''"
          :stop-propagation="false"
        >
          <van-swipe-item
            v-for="(item, i) in list"
            :key="i"
          >
            <div
              :style="{ 'padding-left': spacing,
                        'padding-right': spacing,}"
            >
              <van-image
                :height="height"
                :src="setImgPath(item.imgId, item.imgUrl)"
                :fit="imgType"
                :style="{ borderBottomLeftRadius: bottomLeftRadius,
                          borderBottomRightRadius: bottomRightRadius,
                          borderTopLeftRadius:topLeftRadius,
                          borderTopRightRadius:topRightRadius}"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png" alt>
                </template>
              </van-image>
            </div>
          </van-swipe-item>
        </van-swipe>
      </template>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'

export default {
  name: 'CapsuleChart',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      swiper: null,
      list: [],
      defaultList: [
        {
          id: '1',
          imgId: '',
          imgUrl: ''
        }
      ]
    }
  },

  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {

    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      if (this.option.dataorigin === '1') {
        this.list = result?.dataList?.data || []
      } else {
        let rows = []
        if (Object.prototype.toString.call(result.dataList?.data) === '[object Array]') {
          rows = result.dataList?.data || []
        } else {
          rows = result.dataList?.data.rows || []
        }
        this.list = rows
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.capsule-chart {
  width: rem(750);
  text-align: center;

  .capsule-chart-inner {
    height: rem(250);
    margin: 0 auto;
    overflow: hidden;
    position: relative;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .img-entry {
      width: 100%;
      height: 100%;

      .van-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .van-image__error {
        img {
          width: rem(120);
          height: rem(120);
        }
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .van-swipe__indicators {
      bottom: rem(10);

      .van-swipe__indicator--active {
        @include bg-color($mainColor);
      }
    }
  }
}
</style>
